// 结构型
// 功能：优化结构实现方案

// 适配器模式 - adapter
// 适配独立模块，保证模块间独立解耦且连接兼容
class HKDevice {
    getPlug() {
        return '港行圆柱插头'
    }
}

class Target {
    constructor() {
        this.plug = new HKDevice()
    }
    getPlug() {
        // 适配逻辑
        return this.plug.getPlug() + '+ 适配转换器'
    }
}

const target = new Target()
target.getPlug()

// 装饰器模式
// 目标：动态将责任能力附加到已有的对象之上
// 设备升级
class Device {
    create() {
        console.log('PlayStation4')
    }
}
class Phone {
    create() {
        console.log('iphone16')
    }
}

class Decorator {
    constructor(device) {
        this.device = device
    }

    create() {
        this.device.create()
    }

    update(device) {
        // 升级代码
        console.log(device + 'pro')
        return fn(this.create())
    }
}

const device = new Device()
device.create()

const newDevice = new Decorator(device)
newDevice.create()
newDevice.update()

// 代理模式
// 使用代理人来替代原始对象进行处理工作
// 游戏防沉迷
class Game {
    play() {
        return 'playing'
    }
}

class Player {
    constructor(age) {
        this.age = age
    } 
}

class GameProxy {
    constructor(player) {
        this.player = player
    }
    play() {
        return (this.player.age < 16) ? 'too young' : new Game().play()
    }
}

// 模式场景
// 保持模块独立运行同时兼容老项目与新项目做兼容转换 - 适配器模式
// 可附着于多个模块之上，批量动态赋予功能的时候 - 装饰器模式
// 将代理对象与调用对象分离，不可直接调用目标转而在代理对象中拓展过程校验 - 代理模式

// 实际应用
// 1. 筛选器、表格 需要做一个联动 筛选器数据不能直接导入表格，需要转换 => 独立模块、兼容老场景、转换 => 适配器
// 2. 按钮、title、icon，让这三个组件同时具备远程拉取能力 => 多个不同主体、能力新拓展、动态增强 => 装饰器
// 3. ul上有多个li，点击li => 利用冒泡 => 代理